<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="./css/subject.css"> <!-- 正常视口 -->
  <link rel="stylesheet" href="./css/subject4.css" media="(min-width:1200px)">
  <link rel="stylesheet" href="./css/subject1.css" media="(max-width:1200px)">
  <link rel="stylesheet" href="./css/subject2.css" media="(max-width:992px)">
  <link rel="stylesheet" href="./css/subject3.css" media="(max-width:768px)">
  <link rel="stylesheet" href="./lib/font_t1/iconfont.css">
</head>
<body>
        <!-- 搜索功能显示 -->
        <div class="boXx cover1">
          <!-- 背景图 -->
          <img src="imgas/feng.jpg" alt="">
          <div class="box1">
            <!-- 叉掉功能 -->
              <span class="iconfont icon-shanchuanniu"></span>
              <!-- 搜索区域 -->
            <div class="box2">
                <h2>书籍或作者搜索</h2>
                <!-- 搜索框 -->
                <div class="box1">
                   <div class="resource">
                        <u>全部</u>
                        <span class="iconfont icon-linecar105"></span>
                   </div>
                   <label for="suru"></label>
                    <input type="search" id="suru" placeholder="请输入书籍作者">
                  <span class="iconfont icon-search-1-copy"></span>
                </div>
                <!-- 检索框 -->
                  <ul>
                    <li>
                      <input type="radio" id="quan" name="quAn" checked value="全部">
                      <label for="quan">全部</label>
                    </li>
                    <li>
                      <input type="radio" id="sheng" name="quAn" value="生活">
                      <label for="sheng">生活</label>
                    </li>
                    <li>
                      <input type="radio" id="jiao" name="quAn" value="教育">
                      <label for="jiao">教育</label>
                    </li>
                    <li>
                      <input type="radio" id="liShi" name="quAn" value="历史">
                      <label for="liShi">历史</label>
                    </li>
                    <li>
                      <input type="radio" id="ke" name="quAn" value="科技">
                      <label for="ke">科技</label>
                    </li>
                    <li>
                      <input type="radio" id="wen" name="quAn" value="文学">
                      <label for="wen">文学</label>
                    </li>
                    <li>
                      <input type="radio" id="cai" name="quAn" value="财经">
                      <label for="cai">财经</label>
                    </li>
                    <li>
                      <input type="radio" id="ji" name="quAn" value="计算机">
                      <label for="ji">计算机</label>
                    </li>
                    <li>
                      <input type="radio" id="yu" name="quAn" value="娱乐">
                      <label for="yu">娱乐</label>
                    </li>
                    <li>
                      <input type="radio" id="xiao" name="quAn" value="小说">
                      <label for="xiao">小说</label>
                    </li>
                  </ul>
                <!-- 改变背景图 -->
                <div class="box3">
                      <span class="yan"></span>
                      <span></span>
                      <span></span>
                      <span></span>
                </div>
            </div>
             <!-- 显示书籍 -->
             <ol></ol>
          </div>
      </div>
      <header>
        <!-- 侧边栏 -->
        <aside> 
           <!-- 设置线条 -->
           <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
           </ul>
           <!-- 主要显示区域 -->
           <tool>
             <!-- logo部分 -->
               <logo>
                 <img src="./imgas/logo.png" alt="">
               </logo>
                <!--搜索框  -->
                <div class="box">
                  <u>点击搜索</u>
                  <span class="iconfont icon-sousuokuang"></span>
                </div>
                <!-- 教室、图书馆跳转部分 -->
                <ul>
                  <li><a href="library.html" target="_blank">图书馆</a></li>
                  <li><a href="open.html">学生生活</a></li>
                  <li><a href="#" style="cursor:default;" onclick="event.preventDefault()">交流互动</a></li>
                  <li><a href="#" style="cursor:default;" onclick="event.preventDefault()">文化教育</a></li>
                </ul>
                <img src="./imgas/1.jpg" alt="">
           </tool>
        </aside>
        <div class="box1 activeBox">
          <h2>标题</h2>
          <div>标题</div>
        </div>
        <!-- 右边部分 -->
        <section>
              <!-- 导航栏 -->
              <nav>
                <!-- 字体图标下拉 -->
            <div class="iconfont icon-a-ziyuan30"></div>
                <!-- 显示文字 -->
                <div class="box1">
                  关心自己，从读书开始——
                </div>
                <!-- 显示时间 -->
                <div class="box">
                  <span class="iconfont icon-shijian"></span>
                  <span style="margin-left: 5px;">2024/5/31/18:22</span>
                </div>
                <!-- 登录与注册 -->
                  <ul>
                    <li><a href="loginPage.html">登录</a></li>
                    <li><a href="loginPage.html">注册</a></li>
                  </ul>
              </nav>
              <!-- 图片部分 -->
              <img src="./imgas/feng.jpg" alt="">
              <h3>让读书走进人生，让人生飘逸书香————</h3>
              <ul>
                <li class="activeLi"><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
              </ul>
              <div class="box">
                <ul>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li>读书生活</li>
                </ul>
              </div>
        </section>
      </header>
      <script src="./js/subject1.js"></script>
</body>
</html>